<template>

    <view class="mycard bg-white padding ">

        <view class="flex align-center margin-left-xs">
            <image class="cu-avatar round " :src="data?.avatar" mode="aspectFill"></image>
            <view class="margin-left-xs ">
                <view class="font-bold text-lg">{{data?.username}}</view>
                <text class="text-grey text-sm">79订阅</text>
            </view>
        </view>

        <view class="content-row margin-top-xs margin-left-xs">
            <text class="cuIcon-loading1 margin-left-xs text-content">
                {{data?.content}}
            </text>
        </view>

        <view class="margin-top text-center">
            查看主页
        </view>

    </view>
</template>

<script setup lang="ts">
    import type { Post } from "@/model/goods";

    defineProps<{
        data : Post
    }>()
</script>

<style lang="scss">
    .mycard {
        width: 82%;
        height: 340upx;
        flex-shrink: 0;
        border: 2upx solid #eee;
        border-radius: 10upx;
        margin: 20upx 20upx;
        padding: 20upx;
    }

    .content-row {
        font-size: 28upx;
        line-height: 1.6;
        color: #666;

    }

    .text-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* 垂直排列 */
        -webkit-line-clamp: 3;
        /* 显示 3 行，可根据需求调整 */
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 显示省略号 */
    }
</style>